<template>
    <div class="system-offer-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">
                <div class="table-search-container">
                    <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
                        <el-row>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="币种名称">
                                    <el-input v-model="state.ruleForm.coinName" style="width: 100%" placeholder="币种名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="币种符号">
                                    <el-input v-model="state.ruleForm.coinSymbol" style="width: 100%" placeholder="币种符号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="状态">
                                    <el-select clearable v-model="state.ruleForm.status">
                                        <el-option value="0" label='禁用'>
                                        </el-option>
                                        <el-option value="1" label='启用'>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <el-form-item class="table-form-btn" label-width="35px">
                                    <div>
                                        <el-button size="default" type="primary" @click="refresh()">查询
                                        </el-button>
                                        <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                        </el-button>

                                        <el-button size="default" type="primary" class="ml10" @click="editItem({}, 'add')"> 新增
                                        </el-button>

                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>

                <el-table size="default" :data="state.dataList" style="width: 100%" border>
                    <el-table-column align="center" width="80" label="ID">
                        <template #default="scope">
                            <span>{{ scope.row.swapPairId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="币种1">
                        <el-table-column align="center" label="ID">
                            <template #default="scope">
                                <span>{{ scope.row.coin1Id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="符号">
                            <template #default="scope">
                                <span>{{ scope.row.coin1Symbol }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="兑换限额(天)" width="120">
                            <template #default="scope">
                                <span>{{ scope.row.coin1LimitPerDay }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="用户限额(天)" width="120">
                            <template #default="scope">
                                <span>{{ scope.row.coin1LimitUserPerDay }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="最小兑换数量">
                            <template #default="scope">
                                <span>{{ scope.row.coin1MinLimit }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="最大兑换数量">
                            <template #default="scope">
                                <span>{{ scope.row.coin1MaxLimit }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>


                    <el-table-column align="center" label="币种2">

                        <el-table-column align="center" label="ID">
                            <template #default="scope">
                                <span>{{ scope.row.coin2Id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="符号">
                            <template #default="scope">
                                <span>{{ scope.row.coin2Symbol }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="兑换限额(天)" width="120">
                            <template #default="scope">
                                <span>{{ scope.row.coin2LimitPerDay }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="用户限额(天)" width="120">
                            <template #default="scope">
                                <span>{{ scope.row.coin2LimitUserPerDay }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>


                    <el-table-column align="center" label="价格" width="160">
                        <template #default="scope">
                            <span>{{ scope.row.price }} {{ scope.row.coin2Symbol }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="费率" width="100">
                        <template #default="scope">
                            <span>{{ scope.row.chargePercent * 100 }}% </span>
                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="状态">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0" type="ddanger">禁用</el-tag>
                            <el-tag v-if="scope.row.status == 1" type="info">启用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="创建时间" sortable="custom" prop="CREATED_DATE" width="160">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.createdDate) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="更新时间" width="160" prop="update_Date">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.updatedDate) }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作" width="160" fixed="right">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click.native.prevent="editItem(scope.row)">编辑</el-button>
                            <el-button size="small" @click.native.prevent="updateStatus(scope.row.swapPairId, (scope.row.status == 0 ? 1 : 0))">{{ scope.row.status
                                == 0 ? '启用' : '禁用' }}</el-button>



                        </template>
                    </el-table-column>

                </el-table>

            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[20, 50, 100]"
                v-model:current-page="state.page" background v-model:page-size="state.limit" layout="total, sizes, prev, pager, next, jumper" :total="state.total">
            </el-pagination>

        </el-card>

        <editDialog ref="editDialogRef" @refresh="refresh"></editDialog>
    </div>
</template>


<script setup lang="ts" name="systemMenu">


import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';



import { flashSwapApi } from '/@/api/flashSwap/index';

// 引入组件
const editDialog = defineAsyncComponent(() => import('./dialog.vue'));
const editDialogRef = ref();


const state = reactive({
    page: 1,
    limit: 20,
    total: 0,
    typeList: [] as any,
    coinList: [] as any,
    levelList: [] as any,
    dataList: [] as any,
    sorts: {} as any,
    ruleForm: {
        coinId: "",
        createDate: [],
        address: "", // 用户地址
    },
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    }
});


// 编辑项
const editItem = (row: any, op?: String) => {
    editDialogRef.value.openDialog(op || 'edit', row);
}



const handleResetSearch = () => {
    state.ruleForm = {
        coinId: "",
        createDate: [],
        address: "", // 用户地址
    };
    state.page = 1;
    state.limit = 20;
    queryFlashSwapPair();
}


const formatDate2 = (str: any) => {
    if (!str) return "-";
    return formatDate(new Date(str), "YYYY-mm-dd HH:MM")
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.limit = val;
    queryFlashSwapPair();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.page = val;
    queryFlashSwapPair();
};



const refresh = () => {
    queryFlashSwapPair();
}

const updateStatus = async (swapPairId: any, status: any) => {
    await flashSwapApi().swapPairUpdateStatus({ swapPairId, status });
    refresh();
}


const queryFlashSwapPair = async () => {
    let vo = {
        page: state.page,
        limit: state.limit
    } as any;


    
    let listTemp = await flashSwapApi().swapPairList(state.ruleForm, vo);

    let tempList = [] as any;
    listTemp.list.forEach((element: any) => {
        state.typeList.forEach((el: any) => {
            if (el.value == element.tradeType) {
                element.tradeTypeStr = el.name || "--";
            }
        });
        tempList.push(element)
    });



    state.dataList = tempList;



    state.total = listTemp.total;
}

// const sortsStr = () => {
//     let result = "";
//     for (var prop in state.sorts) {
//         result += prop + (state.sorts[prop] == "descending" ? " desc," : " asc,")
//     }
//     if (result == "") {
//         return null;
//     }
//     return result.substring(0, result.length - 1)
// }











// 页面加载时
onMounted(async () => {
    queryFlashSwapPair();
});



</script>





<style scoped lang="scss">
.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-offer-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>

